<template>
	<view class="scenicDetail">
		<!-- <Header @back="back" left-icon="back" left-text="" right-text="" title="订单详情"></Header> -->
		<view class="content">
			<view class="top">
				<view class="top-list">
					<view class="left">
						<image class="img" :src="details.hostImg" mode=""></image>
					</view>
					<view class="fz17 right">
						<view class="name over2 font-weight">{{details.name}}</view>
						<view class="usestatus">
							<view class="">地址：{{details.address}}</view>
						</view>
					</view>
				</view>

			</view>
			<view class='detail_con'>
				<view class='expirydate' v-if="qrCodeImg.length>0">
					<view class='attribute'>截止时间</view>
					<view class='val fz16'>{{details.validTime}}</view>
				</view>
				<view v-if="qrCodeImg.length>0" class='qr_box'>
					<view class='qr_fondel'>请扫描下方二维码进行核销</view>
					<!-- <image class='qr_img' src='/images/im.png'></image> -->
					<view class='qr_img'>
						<!-- <view class="qrimg">
						<tki-qrcode 
						ref="qrcode" 
						:val="val" 
						:size="size" 
						:unit="unit" 
						:background="background" 
						:foreground="foreground"
						:pdground="pdground" 
						:icon="icon" 
						:iconSize="iconsize" 
						:lv="lv" 
						:onval="onval"
						:loadMake="loadMake"
						@result="qrR" />
					</view> -->
						<image class="qr_img" :src="qrCodeImg"></image>
						<image class="isUseed" src="../../static/img/used.png" mode="" v-if="details.status==='已使用'"></image>
						<image class="isUseed" src="../../static/img/icon_guoqi_mask.png" mode="" v-if="details.status==='过期'"></image>
					</view>
					<view class='order_num'>订单号：{{details.id}}</view>
				</view>
				<view class='fz17 attr_list'>
					<view class='attr_li'>
						<view class='attr_li_left'>支付方式：</view>
						<view class='attr_li_right'>{{details.payType}}</view>
					</view>
					<view class='attr_li'>
						<view class='attr_li_left'>订单总额：</view>
						<view class='attr_li_right'>{{details.totalPrice}}</view>
					</view>
					<view class='attr_li'>
						<view class='attr_li_left'>手机号码：</view>
						<view class='attr_li_right'>{{details.tel}}</view>
					</view>
					<view class='attr_li'>
						<view class='attr_li_left'>购票时间：</view>
						<view class='attr_li_right'>{{details.createTime}}</view>
					</view>

					<view class='attr_li' v-if="details.type==1">
						<view class='attr_li_left'>开始时间：</view>
						<view class='attr_li_right'>{{details.startTime}}</view>
					</view>

					<view class='attr_li' v-if="details.type==1">
						<view class='attr_li_left'>结束时间：</view>
						<view class='attr_li_right'>{{details.endTime}}</view>
					</view>

					<view class='attr_li' v-if="details.type==1">
						<view class='attr_li_left'>入住时长：</view>
						<view class='attr_li_right'>{{details.num}}晚</view>
					</view>
					<view class='attr_li' v-if="details.type==0">
						<view class='attr_li_left'>使用日期：</view>
						<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
							<view class='attr_li_right'>{{details.startTime}}</view>
							<view class='attr_li_right'>~</view>
							<view class='attr_li_right'>{{details.endTime}}</view>
						</view>
					</view>

					<view class='attr_li' v-if="details.type==0">
						<view class='attr_li_left'>订票数量：</view>
						<view class='attr_li_right'>{{details.num}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		data() {
			return {
				qrCodeImg: "",
				iconSize: 0,
				details: {},
				val: '', // 要生成的二维码值
				size: 181, // 二维码大小
				unit: 'upx', // 单位
				background: '#fff', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		components: {
			Header,
			tkiQrcode
		},
		onShow() {},
		onLoad: function(option) {
			if (option.userinfo) {
				let userinfo = JSON.parse(decodeURIComponent(option.userinfo));
				if (userinfo.appid) {
					this.pub.setAppid(userinfo.appid)
				}
				if (userinfo.secret) {
					this.pub.setSecret(userinfo.secret)
				}
				this.pub.getEncryptionOid(userinfo, function(res) {})
			}

			this.details = JSON.parse(decodeURIComponent(option.item))

			if (this.details.qrCodeImg && this.details.qrCodeImg.length > 0) {
				this.$postApi(this.$path.GET_QRCODE_IMG, {
					type: this.details.value2,
					img: this.details.qrCodeImg
				}).then(data => {
					data = data.data
					if (data.success) {
						console.log(data, '获取数据')
						this.qrCodeImg = data.rMsg
					}
				})
			} else {
				this.qrCodeImg = "";
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
				// uni.navigateTo({
				// 	url: '/pages/scenicOrder/index',
				// 	animationType: 'pop-in',
				// 	animationDuration: 200
				// });
			},
			qrR(result) {
				// console.log(result + '00000')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scenicDetail {
		.top {
			background: #F2F2F2;
			padding: 24upx;

			.top-list {
				background: #fff;
				border-radius: 15upx;
				padding: 39upx 19upx;
				box-sizing: border-box;
				display: flex;

				.left {
					width: 222upx;
					height: 222upx;
					margin-right: 24upx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 6upx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 28upx 0 15upx;

					.name {
						color: #1F1F1F;
					}

					.usestatus {
						display: flex;
					}
				}
			}
		}

		.expirydate {
			padding: 48px 27upx 23upx;
			display: flex;
			justify-content: space-between;
			font-size: 17px;
			color: #000;
			border-bottom: 1upx solid #c8c8c8;
		}

		.qr_box {
			padding: 0 25upx 29upx;
			margin: 0 auto;
			font-size: 17px;
			color: #1f1f1f;
			text-align: center;
			border-bottom: 1upx solid #c8c8c8;

			.qr_fondel {
				padding: 21upx 0 57upx;
			}

			.qr_img {
				width: 364upx;
				height: 364upx;
				margin: 0 auto;
				margin-bottom: 90upx;
				position: relative;

				.isUseed {
					width: 152upx;
					height: 114upx;
					position: absolute;
					top: -40upx;
					right: -42upx;
				}

				.qrimg {}
			}

			.order_num {
				width: 459upx;
				box-sizing: border-box;
				padding: 22upx 14upx;
				border: 2upx solid rgba(168, 168, 168, 1);
				border-radius: 15upx;
				margin: 0 auto;
			}
		}

		.img_mask {
			width: 180upx;
			height: 136upx;
			top: -48upx;
			right: -60upx;
			position: absolute;
		}

		.attr_list {
			padding: 0 25upx;
			color: #1F1F1F;

			.attr_li {
				padding: 35upx 10upx;
				display: flex;
				justify-content: space-between;
				font-size: 17px;
				color: #1F1F1F;
				border-bottom: 2upx solid #c8c8c8;

				&:last-child {
					border-bottom: 2upx solid transparent;
				}
			}
		}

		.btn {
			width: 100%;
			height: 90upx;
			background: #FE5A34;
			font-size: 34upx;
			color: white;
			position: fixed;
			bottom: 0px;
			left: 0px;
		}
	}
</style>
